import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
// import TiktokIcon from '@/assets/icons/tiktok.svg'
// import DouyinIcon from '@/assets/icons/douying.svg'
// import ControlIcon from '@/assets/icons/control.svg'

interface ContentTab {
  value: string
  label: string
  Icon: React.ComponentType<{ width: number; height: number }>
}

export function ContentTabs({
  contentTabs,
  value,
  onValueChange,
}: {
  contentTabs: ContentTab[]
  value: string
  onValueChange: (value: string) => void
}) {
  return (
    <Tabs value={value} onValueChange={onValueChange} className="p-4">
      <TabsList className="bg-[#B9AEFF]/10 border-[#573CFF]/10 border rounded-lg">
        {contentTabs.map((tab) => (
          <TabsTrigger
            key={tab.value}
            value={tab.value}
            className="gap-2 text-white data-[state=active]:bg-primary data-[state=active]:rounded-lg"
            // className="flex items-center gap-2 outline-none data-[state=active]:text-black data-[state=active]:border data-[state=active]:shadow-none"
            /* data-[state=active]:shadow-current */
          >
            <tab.Icon width={20} height={20} />
            {/* <Image
              src={`/icons/${tab.Icon}`}
              alt={tab.label}
              width={20}
              height={20}
            /> */}
            {tab.label}
          </TabsTrigger>
        ))}
      </TabsList>
      {/* <TabsContent value="tiktok"></TabsContent> */}
    </Tabs>
  )
}
